<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-city" @click="addr()">
          <span>{{ cityName }}</span>
          <img src="../assets/xjt3.png" alt="" class="head-btm"/>
        </div>
        <div class="head-title">
          <img src="../assets/sousuo.png" alt=""/>
          <input type="text" v-model="title" placeholder="请输入职位名称"/>
        </div>
        <div class="head-search" @click="getIndexData()">搜索</div>
      </div>
      <div class="con-top">
        <div>
          <span v-if="status!==1">推荐职位</span>
          <span v-if="status===1">推荐人才</span>
        </div>
        <span class="more" @click="go('/faxian')"
        >更多<img src="../assets/yjt.png" alt=""
        /></span>
      </div>
    </div>
    <!-- 用于分页 -->
    <div
      class="content"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >

      <!-- 竞价名额 -->  <!--点击查看职位、求职者详情-->
      <div
        class="block"
        v-if="bidList != null"
        v-for="item in bidList"
        @click="goDtl(item.id)"
      >
        <div class="block-top">
          <span>{{ item.title }}</span>
          <span>{{ item.salary.salaryRange }}</span>
        </div>
        <div class="block-class">
          <span>{{ item.workinghours }}</span>
          <span>{{ item.edu.eduBgd }}</span>
        </div>
        <div class="block-btn">
          <span>{{ item.company.companyName }}</span>
          <span>{{ item.region.name }}</span>
        </div>
      </div>
      <!--非竞价名额 更新时间排序 -->  <!--点击查看职位、求职者详情-->
      <div
        class="block"
        v-for="item in recruitList"
        @click="goDtl(item.id)"
      >
        <div class="block-top">
          <span>{{ item.title }}</span>
          <span>{{ item.salary.salaryRange }}</span>
        </div>
        <div class="block-class">
          <span>{{ item.workinghours }}</span>
          <span>{{ item.edu.eduBgd }}</span>
        </div>
        <div class="block-btn">
          <span>{{ item.company.companyName }}</span>
          <span>{{ item.region.name  }}</span>
        </div>
      </div>
      <div v-show="loading===true" class="load">
        <span v-show="loads===true">已经到底了</span>
        <span v-show="loads===false">加载中</span>
      </div>
    </div>
    <div class="footer">
      <div @click="go('/')" class="footer-color">
        <img src="../assets/shouye1.png" alt=""/>
        首页
      </div>

      <div @click="go('/usersFind')" v-if="status!==1">
        <img src="../assets/faxian.png" alt=""/>
        发现
      </div>
      <div @click="go('/companyFind')" v-if="status===1">
        <img src="../assets/faxian.png" alt=""/>
        发现
      </div>

      <div @click="go('/recommend')" >
        <img src="../assets/tuijian.png" alt=""/>
        推荐
      </div>

      <div @click="go('/usersMy')" v-if="status!==1">
        <img src="../assets/wode.png" alt=""/>
        我的
      </div>
      <div @click="go('/companyMy')" v-if="status===1">
        <img src="../assets/wode.png" alt=""/>
        我的
      </div>
    </div>
  </div>
</template>

<script>
import {InfiniteScroll} from "mint-ui";
import companyLoginVue from "./company/companyLogin.vue";

export default {
  inject: ["reload"],
  name: "index",
  cityName: "",
  components: {InfiniteScroll},
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.getCity();
    this.getIndexData();

  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      title: "",
      bidList: [],
      recruitList: [],
      status: localStorage.status,
      pageSize: 3,
      pageNum: 1,
      loading: true,
      loads: false
    };
  },
  // methods 编写js函数
  methods: {
    getCity() {
      let cityId = localStorage.getItem("cityId");
      if (cityId == null || cityId.length === 0) {
        localStorage.setItem("cityId", 210200);
        localStorage.setItem("cityName", "大连市");
      }
      this.cityName = localStorage.getItem("cityName");
    },
    loadMore() {
      console.log("loadMore.....")
      if (this.loading === false) {
        this.loading = true;
        setTimeout(() => {
          this.pageNum = this.pageNum + 1;
		  
          this.getIndexData()
        }, 1500);
      }
    },
    getIndexData() {
      var that = this;
      that.loading = true
      this.$http({
        method: "post",
        url: this.apiURL+"/index/indexed",
        params: {
          page: that.pageNum,
          limit: that.pageSize,
          title: that.title,
          cityId: localStorage.getItem("cityId"),
        },
      })
        .then(({data}) => {
			console.log(that.pageNum)
			console.log(data);
			//前几名竞价list
			that.bidList = data.bidList;
			//非竞价
			that.recruitList=data.recruitList;		  
					
			if(this.title != null && this.pageNum == 1 ){
				 that.recruitList = [];
			}
			//后续根据更新时间list
			that.recruitList = that.recruitList.concat(data.recruitList);
			判断是否是最后一页
			if (data.recruitList.length == that.pageSize) {
				//可以继续上拉更新
				that.loading = false;
				that.loads = false
			} else {
				that.loading = true;
				that.loads = true
			}
        });
    },

    go(r) {
      // if(localStorage.status === 0){
      // 	this.$router.push("/login");
      // }
      //如果路径为"/",则在本页面不跳转，不做任何事情
      if (r !== "/") { //如果不是"/"
        console.log("路径:" + r)
        console.log("状态" + localStorage.status);
        if ( //首先判断status状态，如果为空
          localStorage.status === null ||
          localStorage.status === undefined ||
          localStorage.status === ""
        ) {
          this.$router.push("/usersLogin"); //则跳转usersLogin进行登录
        } else {
          this.$router.push(r);  //如果status不为空，则根据路径正常跳转即可
        }
      }
    },
    goDtl(id) {

      this.$router.push({name: "usersPost", params: {recruitId: 9}});
      // localStorage.recruitId = 9;
    },
    addr() {
      this.$router.push("/addr");
    },
    getData() {
      var that = this;
      this.$http({
        method: "get",
        params: {},
        url: "api/renren-fast/recruit/ycrecruit/listHome",
        // params: {},
      })
        .then(function (res) {
          console.log(res);
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}

.head-fixed {
  width: 100%;
  height: 84px;
  position: fixed;
  z-index: 999;
}

.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head-btm {
  width: 10px;
}

.head-city {
  font-size: 12px;
  padding-right: 20px;
}

.head-city img {
  margin-left: 5px;
}

.head-title {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 26px;
}

.head-title img {
  width: 14px;
  margin-right: 5px;
}

.head-title input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 12px;
}

::-webkit-input-placeholder {
  font-weight: 100;
}

/* 使用webkit内核的浏览器 */
:-moz-placeholder {
  font-weight: 100;
}

/* Firefox版本4-18 */
::-moz-placeholder {
  font-weight: 100;
}

/* Firefox版本19+ */
:-ms-input-placeholder {
  font-weight: 100;
}

.head-search {
  padding: 0 10px 0 20px;
  font-size: 14px;
}

.content {
  width: 100%;

  padding-bottom: 70px;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  top: 84px;
}

.con-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid rgb(248, 248, 248);
}

.con-top div {
  color: #333;
  font-weight: 900;
  font-size: 14px;
}

.more {
  font-size: 12px;
  color: #757575;
  display: flex;
  align-items: center;
}

.more img {
  width: 12px;
}

.block {
  width: 95%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
}

.block .block-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.block-top span:first-child {
  color: #333;
  font-weight: 700;
}

.block-top span:last-child {
  color: #3e63a8;
}

.block-calss {
  width: 100%;
}

.block-class span {
  background: #f0f0f0;
  color: #757575;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 10px;
}

.block-company {
  font-size: 12px;
  color: #757575;
}

.block-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #757575;
}

.load {
  font-size: 12px;
  color: #333;
  padding: 10px 0;
  width: 100%;
  text-align: center;
}
</style>
